<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" th:src="@{/static/layui/css/layui.css}" media="all">
    <style type="text/css">
    </style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend style="font-size: 18px;color: #19a2e3;font-weight: bold">添加活动</legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">活动名称<i style="color: red">*</i></label>
               <div class="layui-input-inline">
                    <select name="id" lay-verify="id" lay-search="" lay-filter="activityInfo">
                      <option value="">直接选择或搜索选择</option>
                      <option th:each="list : ${promotionList}" th:attr="startTime=${#dates.format(list.startTime, 'yyyy-MM-dd HH:mm:ss')},
                      endTime=${#dates.format(list.endTime, 'yyyy-MM-dd HH:mm:ss')}"  th:value="${list.id}" th:text="${list.activityName}"></option>
                    </select>
                    <input id= "activityName" name="activityName" type="hidden">
                </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">链接地址</label>
              <div class="layui-input-inline">
                <input type="text" name="url" autocomplete="off" class="layui-input">
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">开始时间<i style="color: red">*</i></label>
              <div class="layui-input-inline">
                <input type="text" id="startTime" disabled name="startDateStr" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
            </div>
           <div class="layui-inline">
              <label class="layui-form-label">结束时间<i style="color: red">*</i></label>
              <div class="layui-input-inline">
                <input type="text" id="endTime"  disabled name="endDateStr"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
           </div>
        </div>

        <div class="layui-form-item">
           <div class="layui-inline">
              <label class="layui-form-label">支付金额</label>
              <div class="layui-input-inline">
                <input type="text" name="price" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">参与人数<i style="color: red">*</i></label>
              <div class="layui-input-inline">
                <input type="text" name="personNum" lay-verify="person" autocomplete="off" class="layui-input">
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">绑定套餐</label>
                <div class="layui-input-inline">
                    <select name="packageId" lay-verify="packageId" lay-search="">
                      <option value="">直接选择或搜索选择</option>
                      <option th:each="list : ${packageList}" th:value="${list.id}" th:text="${list.name}">layer</option>
                    </select>
                </div>
            </div>
             <div class="layui-inline">
              <label class="layui-form-label">转发标题</label>
              <div class="layui-input-inline">
                <input type="text" name="sendTitle" autocomplete="off" class="layui-input">
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">封面设置<i style="color: red">*</i></label>
            <div class="layui-input-inline">
               <button type="button" class="layui-btn" id="upload1"><i class="layui-icon"></i>上传文件</button>
               <input type="text" id="imgUrl" class="layui-input" lay-verify="imgUrl" name="imgUrl" style="display: none;" disabled>
               <a style="display: none;" onclick="delImg(this,1)" class="layui-btn layui-btn-normal layui-btn-xs">删除</a>
            </div>
            <label class="layui-form-label" style="margin-left: 15px;">转发路径</label>
            <div class="layui-input-inline">
               <button type="button" class="layui-btn" id="upload2"><i class="layui-icon"></i>上传文件</button>
               <input class="layui-input" type="text" id="sendImgUrl" name="sendImgUrl" style="display: none;" disabled>
               <a style="display: none;" onclick="delImg(this,2)" class="layui-btn layui-btn-normal layui-btn-xs">删除</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">转发内容</label>
            <div class="layui-input-inline">
               <textarea name="sendInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
            <label class="layui-form-label" style="margin-left: 15px;">活动说明</label>
            <div class="layui-input-inline">
               <textarea name="activityInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-warm" lay-submit="" id="btnSave" lay-filter="demo1">保 存</button>
              <a class="layui-btn layui-btn-normal" onclick="parent.layer.closeAll();" lay-submit="" id="btnSave" lay-filter="demo1">取 消</a>
            </div>
        </div>
    </form>
    <script src="https://hkres.etalk365.com/public/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/layui/layui.js" th:src="@{/static/layui/layui.js}" ></script>
    <script>
        layui.use(['form', 'layedit', 'laydate','upload'], function(){
          let form = layui.form
          ,layer = layui.layer
          ,layedit = layui.layedit
          ,laydate = layui.laydate;

          form.on('select(activityInfo)', function (data) {
             for(var i = 0 ;i <data.elem.length;i++){
                 if(data.elem[i].selected){
                     var startTime = data.elem[i].getAttribute("startTime");
                     var endTime = data.elem[i].getAttribute("endTime");
                     $("#startTime").val(startTime).attr("disabled","disabled");
                     $("#endTime").val(endTime).attr("disabled","disabled");
                     $("#activityName").val(data.elem[i].innerText);
                 }
             }
             form.render("select");
           });

          let upload = layui.upload;
          //执行实例
          var uploadInst = upload.render({
            elem: '#upload1' //绑定元素
            ,url: '/activityInfoCtl/uploadActivityInfoAttachment/' //上传接口
            ,size:1024
            ,done: function(res){
                layer.msg("上传成功", {icon: 1});
                $("#imgUrl").show().val(res.imgUrl);
                $("#imgUrl").next().attr("value",res.img).show();
                $("#upload1").hide();
            }
            ,error: function(){
                 //请求异常回调
                layer.msg("请求异常回调", {icon: 2});
            }
          });

           //执行实例
          var uploadInst = upload.render({
            elem: '#upload2' //绑定元素
            ,url: '/activityInfoCtl/uploadActivityInfoAttachment/' //上传接口
            ,size:1024
            ,done: function(res){
                layer.msg("上传成功", {icon: 1});
                $("#sendImgUrl").show().val(res.imgUrl);
                $("#sendImgUrl").next().attr("value",res.img).show();
                $("#upload2").hide();
            }
            ,error: function(){
              //请求异常回调
              layer.msg("请求异常回调", {icon: 2});
            }
          });

            //自定义验证规则
          form.verify({
            id :  function(value){
                 if(value == ''){
                     return "请选择活动";
                 }
            },
            person :  function(value){
                 if(value == ''){
                     return "请输入参与人数";
                 }
                 if(!$.isNumeric(value)){
                     return "请输入正确的参与人数";
                 }
            },
            packageId :  function(value){
                 if(value == ''){
                     return "请选择要绑定的套餐";
                 }
            },
            imgUrl :function(value){
                if (value == ''){
                     return "请上传封面";
                }
            },
         });
          //监听提交
          form.on('submit(demo1)', function(data){
            console.info(JSON.stringify(data.field));
            // * 发起请求
            $.ajax({
                data: JSON.stringify(data.field),
                type: "POST",
                dataType: "JSON",
                url: "/activityInfoCtl/addActivityInfo",
                contentType:"application/json;charset=utf-8",
                beforeSend: function () {
                    // 禁用
                    $("#btnSave").addClass('layui-btn-disabled');
                },
                complete: function () {
                    // 启用
                    $("#btnSave").removeClass('layui-btn-disabled');
                },
                success: function (result) {
                    if (result.status > 0) {
                       layer.msg("添加成功",{icon: 1});
                       parent.location.reload();
                    } else if(result.status == -1){
                        // 提示失败
                       layer.msg("该活动已存在",{icon: 2});
                       $("input[name='phone']").focus();
                    }else{
                        layer.msg("添加失败",{icon: 2});
                    }
                }
            });
            // end ajax
            return false;
          });
        });

        //删除图片
        function delImg(obj,type){
            layer.confirm('是否确认删除?', {
              btn: ['是','否'] //按钮
              ,cancel: function(index, layero){
                //取消操作，点击右上角的X
              }
            }, function(){
                $.ajax({
                 type : "POST", //提交方式
                 url : "/activityInfoCtl/delImg",//路径
                 data : {
                     "path" : $(obj).attr("value")
                 },
                 dataType:"json",
                 success: function (data) {
                    if(data.code == 1){
                        layer.msg("删除成功", {icon: 1});
                        $(obj).prev().hide();
                        $(obj).hide();
                        if(type == 1){
                            $("#upload1").show();
                        }else{
                           $("#upload2").show();
                        }
                    }else{
                         layer.msg("删除失败", {icon: 2});
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
            });
        }
    </script>

</body>
</html>
